<template>
	<div class="container">
		<div class="military-plotting-main">
			<div class="plot-items">
				<span class="item" v-for="item in items" :key="item.id" :title="'创建' + item.name" @click="start(item.id)">
					<!-- <svg-icon class="plot-icon" icon="icon-radarchart"></svg-icon> -->
					{{ item.name }}
				</span>
			</div>
			<div class="plot-edit">
				<el-switch v-model="boolEdit" inline-prompt active-text=" 退出编辑 " inactive-text=" 开始编辑 " />
				<div class="edit-button">
					<el-button size="small" @click="save(true)" :disabled="!boolEdit">保存编辑</el-button>
					<el-button size="small" @click="save(false)" :disabled="!boolEdit">取消</el-button>
				</div>
			</div>
		</div>
		<div id="cesiumContainer"></div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import MilitaryPlotting from './MilitaryPlotting'
let mp: MilitaryPlotting
const items = ref([
	{ id: 'Point', name: '点', icon: 'plot-point' },
	{ id: 'Billboard', name: '广告版', icon: 'plot-billboard' },
	{ id: 'Polyline', name: '折线', icon: 'plot-polyline' },
	{ id: 'Curve', name: '曲线', icon: 'plot-curve' },
	{ id: 'FreeLine', name: '自由线', icon: 'plot-freeline' },
	{ id: 'Polygon', name: '多边形', icon: 'plot-polygon' },
	{ id: 'RegularPolygon', name: '正多边形', icon: 'plot-regularpolygon' },
	{ id: 'FreePolygon', name: '自由面', icon: 'plot-freepolygon' },
	{ id: 'LineArrow', name: '简单直线箭头', icon: 'plot-linearrow' },
	{ id: 'CurveArrow', name: '简单曲线箭头', icon: 'plot-curvearrow' },
	{ id: 'RightangleArrow', name: '直角箭头', icon: 'plot-rightanglearrow' },
	{ id: 'DovetailArrow', name: '燕尾箭头', icon: 'plot-dovetailarrow' },
	{ id: 'AttackArrow', name: '攻击箭头', icon: 'plot-attackarrow' },
	{ id: 'ClampingArrow', name: '钳击箭头', icon: 'plot-clampingarrow' },
	{ id: 'RoundRectangle', name: '圆角矩形', icon: 'plot-roundrectangle' },
	{ id: 'Sector', name: '扇形', icon: 'plot-sector' },
	{ id: 'Arcuate', name: '弓形', icon: 'plot-arcuate' },
	{ id: 'Region', name: '集结地', icon: 'plot-region' },
	{ id: 'CurveFlag', name: '曲线旗标', icon: 'plot-curveflag' },
	{ id: 'RectangleFlag', name: '矩形旗标', icon: 'plot-rectangleflag' },
	{
		id: 'PositiveTriangleFlag',
		name: '正三角旗标',
		icon: 'plot-positivetriangleglag'
	},
	{
		id: 'InvertedTriangleFlag',
		name: '倒三角旗标',
		icon: 'plot-invertedtriangleflag'
	},
	{ id: 'TriangleFlag', name: '对三角旗标', icon: 'plot-triangleflag' },
	{
		id: 'PositiveDefense',
		name: '防御阵型-正',
		icon: 'plot-positivedefense'
	},
	{
		id: 'InvertedDefense',
		name: '防御阵型-反',
		icon: 'plot-inverteddefense'
	},
	{
		id: 'ClearAll',
		name: '清除所有',
		icon: 'plot-delete'
	}
])

onMounted(() => {
	initViewer()
})
let Cesium = window.Cesium
let viewer: any
const initViewer = () => {
	let key = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZDJmNGE2OS02NDdiLTRmMmMtOTg5Ni0zMThkY2M5MjJiNzUiLCJpZCI6OTU0OTYsImlhdCI6MTY1MzcxNDM2Mn0.4jSLex2ZQgL_3olQyciwd14iZaxTSVYVoN9IfcpNiNw'
	Cesium.Ion.defaultAccessToken = key
	viewer = window.Viewer = new Cesium.Viewer('cesiumContainer', {
		terrainProvider: Cesium.createWorldTerrain(), // 创建地形
		animation: false, // 动画控件
		timeline: false, // 时间线显示
		baseLayerPicker: true, // 是否显示图层选择控件
		homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
		sceneModePicker: true, // 二三维切换
		infoBox: false, // 信息框显示
		selectionIndicator: false, // 选定框
		navigationHelpButton: false, // 帮助按钮
		fullscreenButton: false, // 全屏按钮
		vrButton: false, // 如果设置为false，将不会创建VR应用场景
		geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
		requestRenderMode: false, // 启用请求渲染模式，不需要渲染
		// scene3DOnly: false, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
		// sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

		// imageryProvider: new Cesium.TileMapServiceImageryProvider({
		// 	url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
		// }),
		imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
			url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
		})
		// imageryProvider: new Cesium.UrlTemplateImageryProvider({
		// 	url: 'http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg'
		// })
	})
	// 设置初始位置
	viewer.camera.setView({
		destination: Cesium.Cartesian3.fromDegrees(105.2, 37.0, 20000000)
	})
	viewer.scene.debugShowFramesPerSecond = true; // 显示fps
	viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除logo显示

}

let boolEdit = ref<boolean>(false)
watch(boolEdit, val => {
	if (!mp) {
		mp = new MilitaryPlotting(viewer)
	}
	mp.edit.enable = val
})
const start = (type: string) => {
	if (!mp) {
		mp = new MilitaryPlotting(viewer)
	}
	switch (type) {
		case 'Point':
			mp.DrawPoint({})
			break
		case 'Billboard':
			mp.DrawBillboard({
				scale: 5
			})
			break
		case 'Polyline':
			mp.DrawPolyline({})
			break
		case 'Curve':
			mp.DrawCurve({})
			break
		case 'FreeLine':
			mp.DrawFreeLine({})
			break
		case 'Polygon':
			mp.DrawPolygon({})
			break
		case 'RegularPolygon':
			mp.DrawRegularPolygon({})
			break
		case 'ClearAll':
			mp.clearAll()
			break
		default:
			break
	}
}
const save = (bool: boolean) => {
	bool ? mp.edit.saveAll() : mp.edit.cancle()
	boolEdit.value = false
}
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 100%;
}
#cesiumContainer {
	width: 100%;
	height: 100%;
}
.military-plotting-main {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 500px;
	z-index: 999999;
	background-color: rgb(70 85 98 / 46%);
	.plot-items {
		text-align: left;
		.item {
			display: inline-flex;
			// width: 32px;
			height: 32px;
			background: rgba(29, 52, 121, 0.8);
			border: 1px solid gray;
			border-radius: 3px;
			margin: 4px;
			align-items: center;
			justify-content: center;
			color: #fff;
			padding: 0 5px;
			&:hover {
				cursor: pointer;
				background: rgba(43, 98, 250, 0.9);
			}
			.plot-icon {
				width: 24px;
				height: 24px;
			}
		}
	}
	.plot-edit {
		padding: 5px 0;
		.edit-button {
			display: inline-block;
			margin-left: 10px;
		}
	}
}
</style>
